<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <template slot="before">
          <span>本月：社保在缴 公积金在缴 增员 减员 入职 离职</span>
        </template>
        <template v-slot:after>
          <el-button @click="$router.push('/social/historicalArchiving')">历史归档</el-button>
          <el-button @click="$router.push(`/social/monthStatement?yearMonth=${yearMonth}`)">{{ yearMonth }}月报表</el-button>
        </template>
      </page-tools>
      <social-tool />
      <!-- 列表 -->
      <el-card>
        <el-table :data="socialList" style="width: 100%" @row-click="overallClick">
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="username" label="姓名" sortable />
          <el-table-column prop="mobile" label="手机" sortable width="120px" />
          <el-table-column prop="workNumber" label="工号" sortable />
          <el-table-column prop="departmentName" label="部门" sortable />
          <el-table-column prop="timeOfEntry" label="入职时间" sortable width="120px" />
          <el-table-column prop="leaveTime" label="离职时间" sortable width="120px" />
          <el-table-column prop="participatingInTheCity" label="社保城市" />
          <el-table-column prop="providentFundCity" label="公积金城市" />
          <el-table-column prop="socialSecurityBase" label="社保基数" />
          <el-table-column prop="providentFundBase" label="公积金基数" />
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" align="middle" justify="center" style="height: 60px">
          <el-pagination
            background
            :current-page="page.page"
            :total="page.total"
            :page-sizes="[4,6,8,10,15,20]"
            :page-size="page.pageSize"
            layout="sizes,prev,pager,next"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import socialTool from './components/social-tool'
import { getSocialList, getSettings } from '@/api/social'

export default {
  components: {
    socialTool
  },
  data() {
    return {
      yearMonth: '',
      socialList: [{
        username: '',
        mobile: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        leaveTime: '',
        participatingInTheCity: '',
        providentFundCity: '',
        socialSecurityBase: '',
        providentFundBase: ''
      }],
      page: {
        total: null,
        page: 1, // 页码
        pageSize: 4
      },
      check: {}
    }
  },
  created() {
    // 获取社保用户列表
    this.getSocialList()
    // 查询企业社保配置信息
    this.getSettings()
  },
  methods: {
    // 获取社保用户列表
    async  getSocialList() {
      const { total, rows } = await getSocialList({ ...this.page, ...this.check })
      this.page.total = total
      this.socialList = rows
      // console.log(this.socialList)
    },
    async getSettings() {
      const { dataMonth } = await getSettings()
      this.yearMonth = dataMonth
      // console.log(await getSettings())
    },
    // 点击行跳转
    overallClick(val) {
      this.$router.push('/social/detail/' + val.id)
    },
    // 分页 // 切换页面
    currentChange(pageNum) {
      this.page.page = pageNum
      this.getSocialList()
    },
    sizeChange(sizeNum) {
      this.page.pageSize = sizeNum
      this.getSocialList()
    },
    // 多选框触发时获取数据
    changeSelect(check) {
      // 拿到数据
      this.check.departmentChecks = check.checkDept
      this.check.providentFundChecks = check.checkProvidentFundCity
      this.check.socialSecurityChecks = check.checkCity

      this.page.page = 1
      // 刷新数据
      this.getSocialList()
    }

  }
}
</script>

<style lang="scss" scoped>
</style>
